<template>
    <div>
        <div class="header">
            <div class="title"><text>联系方式(999)个</text></div>
            <el-button type="primary" style="margin-left:20px;" size="mini" class="icon el-icon-circle-plus-outline"
          @click="dialogFormVisible=true">添加</el-button>
        </div>
        <el-card class="box-card">
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="username"
              label="账号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="campusname"
              label="账号"
              width="180">
            </el-table-column>
            <el-table-column label="编辑账号">
                <template #default="">
                   <div 
                   style="color: cornflowerblue;" 
                   class="icon el-icon-edit"
                   ></div>
                </template>
              </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    size="mini"
                   >重置密码</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="accountdelete(scope)"
                   >删除</el-button>
                </template>
              </el-table-column>
          </el-table>
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.page"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="queryinfo.psize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        </el-card>
    </div>
</template>
<script>
    export default {
       data(){
           return{
            tableData: [],
            queryinfo:{
              page:1,
              psize:5
            },
            total:0,
           }
       },
       created(){
             this.account()
           },
       methods:{
        handleSizeChange(val) {
          this.queryinfo.psize=val
          this.account()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.queryinfo.page=val
        this.account()

        console.log(`当前页: ${val}`);
      },
        async account(){
            const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/company/list',{params:this.queryinfo})
            console.log(res)
            this.tableData = res.data.list
            this.total=res.data.counts
            // console.log(this.total)
        },

       async accountdelete(id){
        const cath = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error=> {
            //  console.log(error)
            return error
        })
         console.log(cath)
         if(cath=='cancel'){
             this.$message.info('已取消删除')
         }
         if(cath=='confirm'){
             const accountid=id.row.id
            const token=window.sessionStorage.getItem('access_token')
            const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/company/delete?id='+accountid,{headers:{token}})
            // console.log(res)
            if(res.errCode==10000){
                this.$message.success('删除成功')
                this.account()
            }
         }
            
        }
       },
   }
</script>
<style scoped>
    .header {
    width: 100%;
    display: flex;
    height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 1px 1px 3px 1px rgb(200, 226, 241);
    background-color: rgb(233, 237, 240);
    align-items: center;
  }

  .title {
    width: 100px;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /* background-color: rgb(198, 219, 243); */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
  }
  .box-card{
      margin-top: 10px;
  }
</style>